<template>
	<view>
		<view class="heared_card">
			<view class="card_img">
				<view class="img">
					<van-image
					  round
					  width="48"
					  height="48"
					  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
					/>
				</view>
				<view class="content">
					<view class="content_name">{{user.username || '白露为霜'}}</view>
					<view class="content_tel">+{{ user.tel || 18672321234}}</view>
				</view>
			</view>
			<view class="card_btn">
				<view class="btn" @click="toSetting">					
					<view style="height: 21px;"  >
						<van-icon name="setting-o" color="#ffffff"/> 
						<text>编辑信息</text>
					</view>
				</view>
			</view>
		</view>
		<view class="card_cell">
			<van-config-provider :theme-vars="themeVars">
			<van-cell-group inset>
			  <van-cell title="我的关注" is-link  @click="goToActivityPage"/>
			  <van-cell title="我的收藏" is-link to="/pages/profile/collect"/>
			</van-cell-group>
			</van-config-provider>
		</view>
		
		
	</view>
</template>

<script>
import { onMounted, reactive,ref } from 'vue'
	export default {
		setup(){
			const user = ref('')
			const themeVars = reactive({
				cellBackground:'#f9fafb',
				cellGroupBackground:'#f9fafb'
			})
			const toSetting = () =>{
				uni.navigateTo({
					url: '/pages/setting/userSetting'
				})
			}
			
			const goToActivityPage = () =>{
				// uni.setStorageSync('activityType','follow')
				uni.reLaunch({
					url: '/pages/activity/index?type=follow'
				})
			}
			onMounted(() =>{
				if(uni.getStorageSync('user')){
					user.value = uni.getStorageSync('user')
				}
			})
			
			return{
				user,
				themeVars,
				toSetting,
				goToActivityPage
			}
		}
	}
</script>

<style scoped lang="scss">
 .heared_card{
	 margin: 10px 24px;
	 height: 166px;	 
	 
	 border-radius: 12px;
	 background: rgba(249, 250, 251, 1); 
	 border: 1px solid rgba(243, 244, 246, 1);
	 .card_img{
		 padding: 18px 20px;
		 height: 53px;
		 width: 287px;
		 display: flex;
		 .img{
		 	width: 64px;
		 }
		 .content{
		 	flex: 1;
			.content_name{
				height:26px;
				font-size: 16px;
				    font-weight: 700;
				    letter-spacing: 0.2px;
				    line-height: 25.6px;
				    color: rgba(17, 24, 39, 1);
			}
			.content_tel{
				height:23px;
				font-size: 14px;
				font-weight: 400;
				letter-spacing: 0.2px;
				line-height: 23.1px;
				color: rgba(107, 114, 128, 1);
				margin-top: 4px;
			}
		 }
	 }
	 .card_btn{
		  display: flex;
		  justify-content: center;
		  padding: 0 20px;
		 .btn{
		 		 width: 287px;
		 		 height: 54px;
		 		 background-image: url("../../static/btn_bg.png");
				 display: flex;
				 align-items: center;
			     justify-content: center;
				 border-radius: 12px;
				 text{
					 font-size: 15px;
					 height: 21px;
					 font-weight: 700;
					 letter-spacing: 0.2px;
					 line-height: 21px;
					 color: rgba(255, 255, 255, 1);
					 margin-left: 5px;
				 }
		 }
	 }
 }
 .card_cell {
	margin: 0 8px;
 }

</style>
